<template>
    <view class="pending-list-item">
        <view @click="goDetail">
            <view class="order-num">订单数</view>
            <view class="order-item-num">
                <view
                    ><text class="strong">{{ item.orderCount }}</text
                    >个订单</view
                >
                <view class="car"
                    ><view>{{ item.vehicleTypeName }}</view
                    ><image src="../../static/icon/car.png" mode="aspectFill" class="default-img"></image
                ></view>
            </view>
            <view class="order-info">
                <view>
                    <view class="title">商品数量</view>
                    <view
                        ><text>{{ item.productCount }}</text
                        >件</view
                    >
                </view>
                <view>
                    <view class="title">总重量</view>
                    <view
                        ><text>{{ item.totalWeight }}</text
                        >吨</view
                    >
                </view>
                <view>
                    <view class="title">总体积</view>
                    <view
                        ><text>{{ item.totalVolume }}</text
                        >方</view
                    >
                </view>
            </view>
            <view class="total"
                ><view>运输总路程：{{ item.totalRoute }}km</view
                ><view class="right">详情<uni-icons type="arrowright"></uni-icons></view
            ></view>
        </view>
        <view class="go" @click="grab">立即抢单</view>
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定立即抢单？"
                :before-close="true"
                @close="close"
                @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        index: {
            type: Number,
            default: 0,
        },
        selectType: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            isSelect: true,
        }
    },
    created() {
        this.isSelect = this.selectType
    },
    mounted() {},
    methods: {
        grab() {
            this.$refs.tip.open()
        },
        confirm() {
            this.close()
            this.$emit("grabOrder", this.item.id)
        },
        //关闭提示
        close() {
            this.$refs.tip.close()
        },
        goDetail() {
            this.easyGoTo("/pages_tms/packet/order/pendingDetail?orderId=" + this.item.id)
        },
    },
}
</script>

<style lang="scss">
.pending-list-item {
    padding: $app-item-padding;
    border-radius: 16rpx;
    background: #fff;
    margin-bottom: $app-item-padding;
    .order-num {
        font-size: 28rpx;
        color: #666666;
        padding-top: 16rpx;
        padding-left: 40rpx;
    }
    .order-item-num {
        display: flex;
        justify-content: space-between;
        color: #333333;
        font-size: 28rpx;
        margin: 0 $app-item-padding 22rpx $app-item-padding;
        padding: 0 16rpx 28rpx 16rpx;
        border-bottom: 1rpx solid #f0f0f0;
        .strong {
            font-size: 56rpx;
            font-weight: bold;
        }
        image {
            width: 48rpx;
            height: 48rpx;
            padding-left: 16rpx;
        }
        .car {
            display: flex;
            font-size: 32rpx;
            justify-content: start;
            align-items: end;
            padding-bottom: 6rpx;
        }
    }
    .order-info {
        display: flex;
        justify-content: space-around;
        margin-left: -$app-item-padding;
        margin-right: -$app-item-padding;
        padding-bottom: 20rpx;
        & > view {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 24rpx;
            color: #333;
            .title {
                padding-bottom: 12rpx;
                color: #666;
            }
            text {
                font-size: 34rpx;
                font-weight: bold;
            }
        }
    }
    .total {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;
        padding: 24rpx 0;
        .right {
            color: #898b9d;
            display: flex;
            align-items: center;
        }
    }
    .go {
        height: 80rpx;
        background: #0091ff;
        border-radius: 12rpx;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 400;
    }
}
</style>
